<template>
  <div class="slider-wrapper">
    <div class="slider-title">
      <span>验证一下！</span>
      <div class="slider-close-icon" @click="onCloseFn">
        <svgIcon slot="prefix" :name="'icon-blockWhiteClose'" :size="20"></svgIcon>
      </div>
    </div>
    <!-- <el-dialog :model="true" class="slider-cont"> -->
      <slide-verify
        :l="42"
        :r="10"
        :w="300"
        :h="155"
        ref="slideblock"
        @again="onAgain"
        @fulfilled="onFulfilled"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
        :accuracy="accuracy"
        :imgs="imgs"
      >
      </slide-verify>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: "sliderVerifyCom",
  components: {},
  props: [],
  data() {
    return {
        text:"向右滑动  ->>>",
        accuracy:2,
        imgs:[
           require( "../assets/bg/bg-1.jpg"),
           require("../assets/bg/bg-3.jpg"),
        ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    onCloseFn(){

      this.$emit("close")
    },
    // 验证通过
    onSuccess(times) {
      console.log("验证通过，耗时 " + times + "毫秒");
      this.$emit("close")
    },
    // 验证失败
    onFail() {
      console.log("验证不通过");
    },
    // 滑块上的刷新
    onRefresh() {
      console.log("点击了刷新小图标");
    },
    // 刷新后执行的回调函数
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    // 检测是否人为操作
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    // 重置刷新
    handleClick() {
      this.$refs.slideblock.reset();
    },
  },
};
</script>

<style lang="scss" scoped>
.slider-wrapper {
position: relative; 
  z-index: 999;
  background-color: $cl-b4;
  padding: 10px;
  box-sizing: border-box;
}
.slider-title{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}
.slider-close-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  // top: 50%;
  // transform: translate(-50%,0);
}

</style>
